<template>
    <div id="exPubCom">
        <img style="height:0.75rem;width:0.4rem;margin:0.9rem 0.6rem;" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
            <div class="address" style="">
                <img style="width:0.85rem;height:1.1rem;"src="../../assets/task/map.png" alt="">
                <section style="height:3rem;width:14rem;display:flex;flex-direction:column;margin-left:0.75rem;">
                    <p style="flex:1;font-size:0.7rem;">收货地址</p>
                    <div style="display:flex;justify-content:space-between;margin-top:0.5rem;font-size:0.7rem;">
                            {{addressSort}} <p></p>
                            <img @click="alterAddress()" style="width:0.4rem;height:0.65rem;margin-top:-0.5rem;" src="../../assets/task/next.png" alt="">
                    </div>
                    <div style="display:flex;margin-top:0.75rem;font-size:0.7rem;">
                            <p>{{myUserData.realName}}</p>
                            <p style="margin-left:0.75rem;margin-top:0.1rem;">{{this.myUserData.phoneNumber}}</p>
                    </div>
                </section>
            </div>
            
            <div id="content">
                <div class="modules" v-for="item in showTaskData">
                    <section style="display:flex; justify-content:space-between;">
                        <p style="color:#29a193;font-size:1rem;">{{item.amount}}￥</p>
                    </section>
                    <textarea style="color:#8a8a8a;font-size:0.7rem;width:80%;height:4rem;margin:15px" placeholder="短信复制">{{item.taskExplain}}</textareap>
                    <section style="display:flex; justify-content:space-between;color:#8a8a8a;font-size:0.6rem;">
                        <img style="width:1.25rem;height:1rem;"src="../../assets/tabber/business.png" alt="">
                        <p>{{item.common1}}</p>
                        <img style="width:7.5rem;height:0.9rem;"src="../../assets/homepage/line.png" alt="">
                        <img style="width:1.4rem;height:1.5rem;margin-top:-0.4rem;"src="../../assets/tabber/destination.png" alt="">
                        <p>{{myUserData.buildingNo+'#'+myUserData.dormNo}}</p>
                        <p style="position:relative;right:8rem;">{{item.common2}}</p>
                    </section>
                </div>
               
            </div>
         
        <div id="stay" style="height:6rem;width:100%;border-radius:13px;background:#fff;box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #e2e2e2;padding:0.75rem;">
            <textarea placeholder="请输入备注信息" maxlength="147" v-model="textDetail"></textarea>
        </div>
        <div style="width:100%;position:absolute;bottom:0px;display:flex;height:2.5rem;line-height:2.5rem;text-align:center;" >
            <p style="background:#fff;width:50%;color:#29a193;">总计<span>{{this.count}}</span></p>
            <p @click="payOff()" style="background:#29a193;width:50%;color:#ffffff;">确定支付</p>
        </div>
        <!--修改地址-->
        <div id="alterWindow" style="display: none;">  
        </div>
        <div id="showLayer" style="display: none;color:#8a8a8a;font-size:0.7rem;">  
            <p style="width:90%;height:2.25rem;margin:auto;line-height:3rem;border-bottom:1px solid #8a8a8a;font-size:0.75rem;font-weight:bold;">编辑地址
                <img @click="closeDiv()" style="width:1rem;height:10x;float:right;margin-top:1rem;" src="../../assets/task/chanel.png" alt="">
            </p> 
            <select v-model="myUserData.schoolName" style="height:2rem;width:10rem;border-bottom:0.4px solid black;margin:0.25rem 0.75rem;">
                <option value="福州大学">福州大学</option>
                <option value="福建工程学院">福建工程学院</option>
                <option value="福建师范大学协和学院">福建师范大学协和学院</option>
            </select>
           

            <input style="width:80%;height:1.5rem;border-bottom:1px solid #8a8a8a;
            margin-left:0.75rem;margin-top:0.75rem;" v-model="detailAddress" placeholder="请输入详细地址" type="text">
               
             <p style="width:90%;height:2.25rem;margin-left:0.75rem;margin-top:0.75rem;line-height:3rem;border-bottom:1px solid #8a8a8a;font-size:0.75rem;font-weight:bold;">收货人
            </p> 
            <section style="width:90%;margin-left:0.75rem;margin-top:0.75rem;">
                <input style="width:30%;height:1.5rem;border-bottom:1px solid #8a8a8a;" v-model="myUserData.realName" placeholder="收货人" type="text">
                <input style="width:50%;height:1.5rem;border-bottom:1px solid #8a8a8a;margin-left:2.95rem;" v-model="myUserData.phoneNumber" placeholder="收货人联系方式" type="text">
               
            </section>
            <section style="width:90%;margin-left:0.75rem;margin-top:0.5rem;height:1.5rem;line-height:1.5rem;">
                <el-radio v-model="myUserData.sex" @change="raduis" label="1">男生</el-radio>
                <el-radio v-model="myUserData.sex" @change="raduis" label="2">女生</el-radio>
            </section>
            <p style="width:90%;text-align:center;background:#29a193;color:#FFFFFF;font-size:0.9rem;letter-spacing:0.25rem;margin-left:0.75rem;margin-top:0.5rem;height:2.5rem;line-height:2.5rem;" @click="changeAddress">确定</p>
        </div> 
        <!--支付-->
        <div id="payWindow" style="display: none;">  
        </div>
        <div id="payLayer" style="display: none;color:#8a8a8a;font-size:0.7rem;">  
           <p style="width:80%;height:2.25rem;margin:auto;line-height:3.5rem;font-size:1rem;text-align:center;font-weight:bold;">
                请输入四位交易密码
                <img @click="closePay()" style="width:1rem;height:10x;float:right;margin-top:1.25rem;" src="../../assets/task/chanelB.png" alt="">
            </p> 
            <section style="width:80%;margin:2.5rem auto;font-size:1rem;display:flex;justify-content: space-around;">
                <input ref="input1" v-model="iput1" maxlength="1" v-focus style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                <input ref="input2" v-model="iput2" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                <input ref="input3" v-model="iput3" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                <input ref="input4" v-model="iput4" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
            </section> 
           <p style="width:50%;background:#29a193;margin:auto;text-align:center;height:2.5rem;line-height:2.5rem;color:#fff;font-size:0.7rem;display:flex;
            justify-content: space-around;border-radius:13px;" @click="comfirmSave">确定</p>
        </div> 
    </div>
</template>
<script>
export default {
  data () {
    return {
        checkPsw:{
            password:undefined,
        },
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
        textDetail:undefined,
        count:0,
        detailAddress:undefined,
         myUserData:{
           roomAddress:undefined,
           phoneNumber:undefined,
           buildingNo:undefined,
           dormNo:undefined,
           schooolName:undefined,
       },
       addressSort:undefined,
        showTaskData:undefined,
        alterSch:false,
        radio: '1',
        msg: '',
    }
  },
   watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
  created(){
       this.getCurrentUser()
  },
  mounted(){
        this.getParams();
  },
  methods:{
      raduis(){
          console.log(this.myUserData.sex)
      },
    //   验证通过并保存数据
    comfirmSave(){
        
         this.showTaskData.forEach((item)=>{
            item.taskLocation = this.addressSort;
            item.common3 = this.myUserData.realName;
            item.common4 = this.myUserData.phoneNumber;
            item.common6 = this.textDetail;
           
            if(this.myUserData.sex=='1'){
                item.common5 = '男';
            }else{
                item.common5 = '女';
            }
            // item.taskExplain = this.textDetail;
        })
      
        this.checkPsw.password = this.iput1+this.iput2+this.iput3+this.iput4
        this.$api.checkPayPsw(this.checkPsw).then((res)=>{
              if(res.code == '000000'){
                    this.$api.addAllexpress(this.showTaskData).then((res)=>{
                        if(res.code == '000000'){
                            this.$router.push({path:'/cueMsg'})
                        }
                    })
              }else{
                  return
              }
          })
       
    },
    //   修改地址
    changeAddress(){
        this.closeDiv()
        // document.getElementById('alterWindow').style.display = 'none';  
        // document.getElementById('showLayer').style.display = 'block';      
        this.addressSort = this.myUserData.schoolName+this.detailAddress
    },
        // 获取当前用户信息-需要使用默认地址
        getCurrentUser(){
           this.$api.currUser().then((res)=>{
              if(res.code == '000000'){
                  this.myUserData = res.data;
                  this.myUserData.sex = this.myUserData.sex+''
                  this.addressSort = this.myUserData.schoolName+this.myUserData.faculty+this.myUserData.buildingNo+'#'+this.myUserData.dormNo
                  
              }
          })
      },
        alterAddress(){  
            document.getElementById('alterWindow').style.display = 'block';  
            document.getElementById('showLayer').style.display = 'block';        
        },
        payOff(){
            document.getElementById('payWindow').style.display = 'block';  
            document.getElementById('payLayer').style.display = 'block';
        },
        closeDiv() {  
            document.getElementById('alterWindow').style.display = 'none';  
            document.getElementById('showLayer').style.display = 'none';  
        },
        closePay() {  
            document.getElementById('payWindow').style.display = 'none';  
            document.getElementById('payLayer').style.display = 'none';  
        },
        dropMenu(){
            this.alterSch=!this.alterSch;
        },
        getParams () {
            let routerParams = this.$route.query
            this.showTaskData= routerParams.data
            this.showTaskData.forEach((item)=>{
                this.count = this.count+Number(item.amount)
            })
        },
  }
}
</script>
<style>
#exPubCom{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/bg.png);
}
#exPubCom #content{
    height:17.5rem;
    overflow:scroll;
}
#exPubCom  .address{
    display:flex;
    margin:0px auto;
    height:5rem;
    width:80%;
    background:#fff;
    padding:0.75rem;
    color:#8a8a8a;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #e2e2e2;
}
#exPubCom #content .modules{
    margin:0.75rem auto;
    height:10rem;
    width:80%;
    background:#fff;
    padding:0.75rem;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #e2e2e2;
    border-radius:13px;

}

#exPubCom #alterWindow,#payWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  
#exPubCom  #showLayer {   
    width: 84%;
    height: 52%;
    background:#ffffff;  
    left: 8%;  
    top: 25%;
    color:#000;  
    z-index: 2;  
    position: absolute;  
} 
#exPubCom  #payLayer {   
    width: 84%;
    height: 40%;
    background:#ffffff;  
    left: 8%;  
    top: 30%;
    color:#000;  
    z-index: 2;  
    border-radius:13px;
    position: absolute;  
}
</style>